<template>
	<view class="box" v-if="is==0">
		<view class="agreement-main-box" v-if="showp" style="z-index: 10;">
			<view class="agreement-box">
				<view class="title">{{title}}</view>
				<view class="content-box">
					<view class="content" v-for="item in content">
						{{item}}
					</view>
				</view>
				<view class="btn" @click="showp=false">我知道了</view>
			</view>
		</view>
		<u-popup v-model="flag" mode="center" width="100%">
			<image src="https://web.78keji.cn/images/tequan/_3.gif" mode="widthFix" style="width: 100%;"></image>
		</u-popup>
		<image src="https://web.78keji.cn/images/tequan/规则@3x.png" mode="widthFix"
			style="position: fixed;right: 0;z-index: 9;width: 120rpx;top: 120rpx;" @click="showp=true"></image>
		<view class='box d_f j_c_c a_i_c' v-if="!shows">
			<image src="../../static/hand.png" mode="widthFix"
				style="width: 180rpx;position: absolute;margin-top: 200rpx;margin-left: 200rpx;z-index: 5;"
				class="hands"></image>
			<image src="../../static/按钮@3x.png" mode="widthFix" style="width: 25%;position: absolute;z-index: 4;"
				@click="onStart" class="buttons"></image>
			<image src="../../static/针@3x.png" mode="widthFix"
				style="width: 15%;z-index: 3;position: absolute;margin-top: -230rpx;"></image>
			<image src="../../static/zhuan.png" mode="widthFix"
				style="width: 77%;position: absolute;z-index: 2;margin-top: 70rpx;" :animation="animationData"></image>
			<!-- 	<image src="../../static/light.png" mode="widthFix" style="width: 88%;position: absolute;z-index: 1;"
			class="imagex"></image> -->
			<image src="https://web.78keji.cn/images/tequan/3.gif" mode="widthFix" style="width: 100%;"></image>


		</view>
		<view class='box d_f j_c_c  a_i_c' v-if="shows">
			<view class="d_f a_i_c" style="position: absolute;z-index: 5;margin-top: 80rpx;">
				<view class="" style="width: 393rpx;">
					<text style="color: #FF2420;font-weight: bold;font-size: 54rpx;">￥</text>
					<u-count-to :start-val="30" :end-val="120"></u-count-to>
					<!-- <text  style="color: #FF2420;font-weight: bold;font-size: 180rpx"></text> -->
				</view>
				<image src="../../static/话费券@3x.png" mode="widthFix" style="width: 60rpx;margin-left: 30rpx;"></image>
			</view>
			<view class="d_f a_i_c"
				style="height: 91rpx;width: 70%;border: 1px solid #FF0000;z-index: 4;border-radius: 45rpx;margin-top: 465rpx;">
				<image src="../../static/phone.png" mode="widthFix" style="width: 29rpx;margin-left: 34rpx;"></image>
				<input type="text" v-model="value" maxlength="11" placeholder="请输入您的手机号"
					style="margin-left: 25rpx;color: ##808080;">
			</view>
			<image src="../../static/120.png" mode="widthFix" style="width: 89%;height: 75%;position: absolute;">
			</image>
			<image src="../../static/chongzhi.png" mode="widthFix"
				style="width: 70%;position: absolute;margin-top: 700rpx;" @click="chongzhi" class="buttons"></image>
			<image src="../../static/hand.png" mode="widthFix"
				style="width: 180rpx;position: absolute;margin-top: 800rpx;margin-left: 400rpx;" class="hands"></image>
		</view>
	</view>
</template>
<script>
	import {

		getshenhe
	} from '../../api/index.js'
	export default {
		data() {
			return {
				is: '',
				showp: false,
				title: '活动规则',
				content: [
					"开通会员规则 ",
					"活动内容请仔细阅读活动规则，我们的活动售卖的是会员并非话费直充，请您知晓，在本页面开通会员后，我们将赠送您100元话费礼包至您的APP账户。",
					"您付款后则默认清楚且接受本规则，误支付用户请通过活动规则的退款方式退款，我们会尽快为您处理，谢谢配合。",
					"完成会员支付后，您即可下载APP登录即可使用赠送的话费券。",
					" 话费券包解释如下：",
					"1:包含20张5元话费优惠券，共计100元优惠券。",
					"2:每充值50元以上，可使用一张优惠券，话费券每月限固定时间使用1张，每月均可使用。 3:充值后2个小时内到账。",
					"最终活动规则以app内展示为准。",
				],
				a: '',
				value: '',
				shows: false,
				flags: false,
				flag: false,
				deg: 0, // 初始化角度
				duration: 1500, //动画时长
				awardNumber: 1, // 中奖区域 从1开始
				isStart: false, //防止多次触发动画
				animationData: {}, //动画对象
				reword: [{
						content: '111',
						color: '#456484'
					},
					{
						content: '222',
						color: '#456544'
					},
					{
						content: '333',
						color: '#784654'
					},
					{
						content: "444",
						color: '#527484'
					},

				], //设置的奖项
				qcjParamStr: ''
			}
		},
		onShow: function() { //创建对象，并将对象存放在data中以挂载在需要进行动画的元素之上
			var animation = uni.createAnimation({
				duration: this.duration,
				timingFunction: 'ease-in-out', //旋转模式
			})
			this.animation = animation //挂载在vue实例上以便渲染

		},
		onLoad(option) {
			getshenhe({
				pid: 2,
				ver: 48
			}).then((res) => {
				console.log(res)
				this.is = res.data.is
			})
			if (option.a) {
				this.a = option.a
			}
			if (option.qcjParamStr) {
				this.qcjParamStr = option.qcjParamStr
			}



		},
		methods: {
			chongzhi() {
				if (this.value.length < 11) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的手机号',
						duration: 2000
					});
				} else {
					uni.setStorageSync('mobile', this.value)
					uni.navigateTo({
						url: '/pages/rafe/rafe?a=' + this.a + '&qcjParamStr=' + this.qcjParamStr
					})
				}
			},
			//封装动画旋转整数圈的方法，只需接受（角度，时间）即可开始旋转动画
			rotate: function(deg, duration) {
				if (this.isStart) return //防止用户多次点击动画
				this.isStart = true //此时旋转开始，动画无法再次触发
				setTimeout(function() { //设置定时器在动画时间后方可再次触发转盘动画
					this.isStart = false
				}.bind(this), duration) //此时用的普通函数，存在this指向问题，需要改变this指向
				this.animation.rotate(deg).step().rotate((this.awardNumber - 1) * -(360 / this.reword.length)).step({
					duration: 0,
					timingFunction: 'linear',
				})
				this.animationData = this.animation.export()
				console.log(1111)
				setTimeout(() => {
					this.flag = true
					setTimeout(() => {
						this.flag = false
						this.shows = true
					}, 1000);

				}, 1500);

			},
			//开始旋转
			onStart() {
				//提前将要转的角度算好，再传入要转的时长即可转到自己想要的角度
				this.rotate(360 + (360 - (this.awardNumber - 1) * (360 / this.reword.length)), this.duration)
			}

		}

	}
</script>

<style lang='scss'>
	@keyframes hand {

		0%,
		100% {
			transform: translateX(0) translateY(0);
		}

		50% {
			transform: translateX(0.5rem) translateY(0.5rem);
		}
	}

	@keyframes butChange {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.1);
		}

		100% {
			transform: scale(1);
		}
	}

	.hands {
		animation: hand 1s ease .7s infinite;
	}

	.imagex {

		/* 绑定动画 */

		animation: rotate 1s infinite linear
	}

	.buttons {
		animation: butChange 1s infinite;
	}

	/* 定义动画 */
	/* 	@keyframes rotate {
		
	    0%{
	        transform: rotate(0deg);
	    }

	    100%{
	        transform: rotate(150deg);
	    }
	} */

	.box {
		position: relative;
		width: 100%;
		height: 100%;
		background-color: black;

	}

	.turntable {
		position: relative;
		margin: 200px auto;
		background: red;
		height: 225px;
		width: 225px;
		border-radius: 50%;
		text-align: center;
		overflow: hidden;
	}

	.line {
		position: fixed;
		top: 35%;
		left: 50%;
		background-color: #000;
		height: 80px;
		width: 1px;
	}

	.cell {
		position: absolute;
		width: 50px;
		height: 50px;
		top: 0;
		left: 50%;
		margin-left: -25px;
		background-color: yellow;
		transform-origin: 25px 112.5px;
	}

	.sector {
		width: 225px;
		height: 225px;
		position: absolute;
		clip: rect(0 225px 225px 112.5px);
		overflow: hidden;
	}

	.inner {
		width: 100%;
		height: 100%;
		position: absolute;
		clip: rect(0 112.5px 225px 0);
		transform: rotate(60deg);
		border-radius: 50%;
	}

	.agreement-main-box {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		background: url("https://qiming-1308147483.cos.ap-chengdu.myqcloud.com/doc%2Fpinzhi_shenghuo_huiyuan_quanyi%2Fcommon%2Flogin-shadow-bg.png") repeat;
		z-index: 3;

		.agreement-box {
			border-radius: 20rpx;
			background-color: #faf7f2;
			padding: 30rpx;
			width: 85%;
			box-sizing: border-box;

			.title {
				text-align: center;
				color: #f94439;
				font-size: 28rpx;
				padding-bottom: 20rpx;
			}

			.content-box {
				max-height: 50vh;
				overflow: auto;

				.content {
					font-size: 25rpx;
					color: #515151;
					margin-top: 30rpx;
					line-height: 45rpx;
				}

			}

			.btn {
				width: 300rpx;
				font-size: 25rpx;
				letter-spacing: 2rpx;
				color: #fff;
				text-align: center;
				background-color: #f94338;
				border-radius: 120rpx;
				padding: 13rpx 0;
				font-size: 32rpx;
				margin: 10rpx auto 0;
			}
		}
	}
</style>